<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>奇妙在线</title>
    <script src="../javascripts/lib/jq/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../javascripts/jquery.mousewheel.js"></script>
    <!-- <script type="text/javascript" src="../javascripts/jquery.jscrollpane.min.js"></script>-->
    <script type="text/javascript" src="../javascripts/scroll-startstop.events.jquery.js"></script>
    <script type="text/javascript" src="../javascripts/jquery.cookie.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <!--<script type="text/javascript" src="../javascripts/chat.js"></script>-->
    <link type="text/css" rel="stylesheet" href="../stylesheets/common.css">
    <link type="text/css" rel="stylesheet" href="../stylesheets/chat.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/jscrollpane1.css" />
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <!--<title>奇妙在线</title>-->
    <script>
        var socket = io.connect();
        var from = $.cookie('user');//从 cookie 中读取用户名，存于变量 from
        var to = 'all';//设置默认接收对象为"所有人"
        //发送用户上线信号
        var room="<%=room%>";
        socket.emit('online', {user: "<%=nickname%>",openid:"<%=openid%>",headimgurl:"<%=headimgurl%>",room:"<%=room%>"});  ///////////////// form
        socket.on(room, function (data) {
            //var sys = '<div style="color:#f00">您好'+data.user+',欢迎进入在线咨询！</div><span class="talk_time">'+now()+'</span>';
            if(data.user=="<%=nickname%>") {
                var sys = '<div class="talk_recordbox">' +
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" src="../images/logo.png"/>系统</div>' +
                        '<div class="talk_recordtextbg">&nbsp;</div>' +
                        '<div class="talk_recordtext">' +
                        '<h3>' +
                        '<div style="color:#f00;font-size: 12px">您好' + data.user + '，欢迎进入在线咨询！您可点击下面链接搜索相似话题:' +
                        '<a href="/view/pubchat?uuid='+"<%=openid%>"+'&&room='+"<%=room%>"+'" style="font-size: 12px;">搜索</a></div>' +
                        '<span class="talk_time" style="font-size: 12px;">' + now() + '</span>' +
                        '</h3></div></div>';
                $('#jp-container').append(sys);
                //showSayTo();
            }
        });

        function say() {
            var $msg = $("#input_content").val();
            if ($msg == "") return;
            var sys='<div class="talk_recordboxme">';
            sys+='<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" onerror='+'this.src="../images/logo.png"'+' src='+"<%=headimgurl%>"+'/>'+"<%=nickname%>".substring(0,4)+'</div>';
            sys+='<div class="talk_recordtextbg">&nbsp;</div>';
            sys+='<div class="talk_recordtext">';
            sys+='<h3 id="contents" style="font-size: 12px">'+$msg+'</h3>';
            sys+='<span class="talk_time" style="font-size: 12px;">'+now()+'</span></div></div>';
            $(sys).appendTo('#jp-container');
            //发送发话信息
            socket.emit('say', {from: "<%=nickname%>", to: "all", msg: $msg,headimgurl:"<%=headimgurl%>",room:"<%=room%>",openid:"<%=openid%>"});
            //清空输入框并获得焦点
            $("#input_content").val("");
            $('#jp-container').scrollTop($('#jp-container')[0].scrollHeight);
        }
        function over(){
            socket.emit('over',{from:"<%=nickname%>",room:"<%=room%>",openid:"<%=openid%>"});
        }

        socket.on(room, function (data) {
            //对所有人发送图片
            var images={
                localId:[]
            };
            if(data.to=='all_img'){
//                var url=encodeURIComponent(window.location.href);
//                $.get('/video?url='+url,function(datas){
//                    var token=datas.token;
//                    alert("=-=-=-"+token);
//                    $.get('/wxmedia?token='+token+'&&serverid='+data.msg[0],function(doc){
//                        alert(typeof(doc));
//                        var test='<img src="data:image/png;base64,'+doc+'" />';
//                        $('#jp-container').append("========="+test);
//                    });
//                });
                var i = 0, length = data.msg.length;
                images.localId = [];
                var sys='<div class="talk_recordbox">'+
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" onerror='+'this.src="../images/logo.png"'+' src='+data.headimgurl+' />'+data.from.substring(0,4)+'</div>'+
                        '<div class="talk_recordtextbg">&nbsp;</div>'     +
                        '<div class="voice_text_talk" style="width:67%;">';
                download();
                function download() {
                    wx.downloadImage({
                        serverId: data.msg[i],
                        success: function (res) {
                            sys+='<img id="contents" src="'+res.localId+'" style="width: 200px;"/><br>';
                            i++;
                            images.localId.push(res.localId);
                            if (i < length) {
                                download();
                            }else{
                                sys+='</div></div>';
                                $('#jp-container').append(sys);
                            }
                        }
                    });
                }
            }
            //对所有人语音
            if(data.to=='all_voice'){
                var sys='<div class="talk_recordbox">'+
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" onerror='+'this.src="../images/logo.png"'+' src='+data.headimgurl+' />'+data.from.substring(0,4)+'</div>'+
                        '<div class="talk_recordtextbg">&nbsp;</div>'     +
                        '<div class="voice_text_talk" style="width:65%;" name="true" id="'+data.msg+'" onclick="downvoice(this);">'               +
                        '<h3>'                                            +
                        '<div style="font-size: 12px;color: red;text-align: center">语音</div>'+
                        '</h3></div></div>';
                $('#jp-container').append(sys);
            }
            //对所有人说
            if (data.to == 'all') {
                var sys='<div class="talk_recordbox">'+
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" onerror='+'this.src="../images/logo.png"'+' src='+data.headimgurl+' />'+data.from.substring(0,4)+'</div>'+
                        '<div class="talk_recordtextbg">&nbsp;</div>'     +
                        '<div class="talk_recordtext">'               +
                        '<h3>'                                            +
                        '<div style="font-size: 12px">'+data.msg+'</div><span class="talk_time" style="font-size: 12px;">'+now()+'</span>'+
                        '</h3></div></div>';
                $('#jp-container').append(sys);
                $('#jp-container').scrollTop($('#jp-container')[0].scrollHeight);
            }
            if(data.sessionopenid=="<%=openid%>"){
            if(data.over==0){
                var over = '<div class="talk_recordbox">' +
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" src="../images/logo.png"/>系统</div>' +
                        '<div class="talk_recordtextbg">&nbsp;</div>' +
                        '<div class="talk_recordtext">' +
                        '<h3>' +
                        '<div style="color:#f00;font-size: 12px">您好' + data.sessionuser + '，您不是本次会话的发起人，无法结束此会话！</div><span class="talk_time" style="font-size: 12px;">' + now() + '</span>' +
                        '</h3></div></div>';
                $('#jp-container').append(over);
            }else if(data.over==1){
                var over = '<div class="talk_recordbox">' +
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" src="../images/logo.png"/>系统</div>' +
                        '<div class="talk_recordtextbg">&nbsp;</div>' +
                        '<div class="talk_recordtext">' +
                        '<h3>' +
                        '<div style="color:#f00;font-size: 12px">您好' + data.sessionuser + '，本次会话已结束！</div><span class="talk_time" style="font-size: 12px;">' + now() + '</span>' +
                        '</h3></div></div>';
                $('#jp-container').append(over);
            }else if(data.over==2){
                var over = '<div class="talk_recordbox">' +
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" src="../images/logo.png"/>系统</div>' +
                        '<div class="talk_recordtextbg">&nbsp;</div>' +
                        '<div class="talk_recordtext">' +
                        '<h3>' +
                        '<div style="color:#f00;font-size: 12px">'+data.obj.sendtextmsg+'</div><span class="talk_time" style="font-size: 12px;">' + now() + '</span>' +
                        '</h3></div></div>';
                $('#jp-container').append(over);
            }else if(data.over==3){
                var over = '<div class="talk_recordbox">' +
                        '<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" src="../images/logo.png"/>系统</div>' +
                        '<div class="talk_recordtextbg">&nbsp;</div>' +
                        '<div class="talk_recordtext">' +
                        '<h3>' +
                        '<div style="color:#f00;font-size: 12px">'+data.obj.sendtextmsg+'</div><span class="talk_time" style="font-size: 12px;">' + now() + '</span>' +
                        '</h3></div></div>';
                $('#jp-container').append(over);
            }
            }
            //对你密语
//            if (data.to == from) {
//                $("#contents").html('<div style="color:#00f" >' + data.from + '(' + now() + ')对 你 说：<br/>' + data.msg + '</div><br />');
//            }
        });

        function start(){
            var url=encodeURIComponent(window.location.href);
            $.get('/video?url='+url,function(datas){
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: 'wx451bc6acf8eb6a4b', // 必填，公众号的唯一标识
                    timestamp:datas.signs.timestamp , // 必填，生成签名的时间戳
                    nonceStr: datas.signs.nonceStr, // 必填，生成签名的随机串
                    signature: datas.signs.signature,// 必填，签名，见附录1
                    jsApiList: ['checkJsApi',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'hideMenuItems',
                        'showMenuItems',
                        'hideAllNonBaseMenuItem',
                        'showAllNonBaseMenuItem',
                        'translateVoice',
                        'startRecord',
                        'stopRecord',
                        'onRecordEnd',
                        'playVoice',
                        'pauseVoice',
                        'stopVoice',
                        'uploadVoice',
                        'downloadVoice',
                        'chooseImage',
                        'previewImage',
                        'uploadImage',
                        'downloadImage',
                        'getNetworkType',
                        'openLocation',
                        'getLocation',
                        'hideOptionMenu',
                        'showOptionMenu',
                        'closeWindow',
                        'scanQRCode',
                        'chooseWXPay',
                        'openProductSpecificView',
                        'addCard',
                        'chooseCard',
                        'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            });
        }
        start();
        // 4.2 开始录音
        function startRecord(){
            wx.startRecord({
                cancel: function () {
                    alert('用户拒绝授权录音');
                }
            });
        };

        function stopRecord(){
            wx.stopRecord({
                success: function (res) {
                    var voice={};
                    voice.localId = res.localId;
                    wx.uploadVoice({
                        localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            var serverId = res.serverId; // 返回音频的服务器端ID
                            var sys='<div class="talk_recordboxme">';
                            sys+='<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" onerror='+'this.src="../images/logo.png"'+' src='+"<%=headimgurl%>"+'/>'+"<%=nickname%>".substring(0,4)+'</div>';
                            sys+='<div class="talk_recordtextbg">&nbsp;</div>';
                            sys+='<div class="voice_text" style="width:65%;" id="'+voice.localId+'" onclick="playvoice(this);">';
                            sys+='<h3 id="contents" style="font-size: 12px;color: red;text-align: center">语音</h3>';
                            sys+='</div></div>';
                            $(sys).appendTo('#jp-container');
                            socket.emit('voice', {from: "<%=nickname%>", to: "all_voice", msg: serverId,headimgurl:"<%=headimgurl%>",room:"<%=room%>",openid:"<%=openid%>"});
                        }
                    });

                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });

        }
        function playvoice(obj){
            var localid=obj.id;
            wx.playVoice({
                localId: localid
            });
        }
        function downvoice(obj){
            var flag=$(obj).attr('name');
            if(flag=="true"){
                var serverId=$(obj).attr('id');
                var localId="";
                wx.downloadVoice({
                    serverId: serverId,
                    success: function (res) {
                        localId = res.localId;
                        wx.playVoice({
                            localId: localId
                        });
                        $(obj).attr('name','false');
                        $(obj).attr('id',localId);
                    }
                });
            }else{
                var localid=$(obj).attr('id');
                wx.playVoice({
                    localId: localid
                });
            }
        }
        var images = {
            localId: [],
            serverId: []
        };
        function chooseImage(){
            wx.chooseImage({
                success: function (res) {
                    //images.serverId.push(res.serverId);
                    images.localId = res.localIds;
                    var i = 0, length = images.localId.length;
                    images.serverId = [];
                    var sys='<div class="talk_recordboxme">';
                    sys+='<div class="user" style="color: #f5f5f5;font-size: 10px"><img style="width: 46px;height: 46px;" onerror='+'this.src="../images/logo.png"'+' src='+"<%=headimgurl%>"+'/>'+"<%=nickname%>".substring(0,4)+'</div>';
                    sys+='<div class="talk_recordtextbg">&nbsp;</div>';
                    sys+='<div class="voice_text" style="width:65%;">';
                    function uploadimg(){
                        wx.uploadImage({
                            localId: images.localId[i],
                            success: function (res) {

                                sys+='<img id="contents" src="'+images.localId[i]+'" style="width: 200px;"/><br>';

                                i++;
                                images.serverId.push(res.serverId);
                                if (i < length) {
                                    uploadimg();
                                }else{
                                    sys+='</div></div>';
                                    $(sys).appendTo('#jp-container');
                                    socket.emit('img', {from: "<%=nickname%>", to: "all_img", msg: images.serverId,headimgurl:"<%=headimgurl%>",room:"<%=room%>",openid:"<%=openid%>"});
                                }
                            },
                            fail: function (res) {
                                alert(JSON.stringify(res));
                            }
                        });
                    }
                    uploadimg();
                }
            });
        }

        function now() {
            var date = new Date();
            var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + (date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()) + ":" + (date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds());
            return time;
        }
    </script>
</head>
<body>
<div class="talk">
    <!--<div class="talk_title"><span>奇妙在线</span></div>-->
    <div class="talk_record">
        <div id="jp-container" class="jp-container" style="width: 100%">
            <!--<div class="talk_recordbox">-->
            <!--<div class="user"><img src="../images/thumbs/11.jpg"/>系统</div>-->
            <!--<div class="talk_recordtextbg">&nbsp;</div>-->
            <!--<div class="talk_recordtext">-->
            <!--<h3 id="contents">asfafasf</h3>-->
            <!--</div>-->
            <!--</div>-->

            <!--<div class="talk_recordboxme">-->
            <!--<div class="user"><img src="../images/thumbs/15.jpg"/>王玉山</div>-->
            <!--<div class="talk_recordtextbg">&nbsp;</div>-->
            <!--<div class="talk_recordtext">-->
            <!--<h3 id="contents">adfwafawef</h3>-->
            <!--<span class="talk_time"></span>-->
            <!--</div>-->
            <!--</div>-->
        </div>
    </div>
</div>
<div class="talk_word" style="height: 50px;background-color: #fff; line-height: 50px;vertical-align: middle">

    <img src="../image/Record.png" class="talk_send" id="Record" onmouseup="stopRecord()" onmousedown="startRecord();" style="">
    <!--<input class="add_face" id="facial" type="button" title="添加表情" value="" />-->
    <input id="input_content" style="line-height:48px;font-size:13px;width: 43%;height: 28px;border: solid 1px #000000" type="text" class="messages emotion" autocomplete="off"  />
    <img src="../image/wxsay.png" onclick="say();" class="talk_send" style="height:30px;width: 40px;" id="say"/>
    <img src="../image/WxImg.png" class="talk_send" id="Img" onclick="chooseImage();" style="">
    <!--<input class="talk_send" onclick="over();" style="height: 25px" type="button" id="over" title="结束" value="结束" />-->
</div>



<script type="text/javascript">
    $(function(){


        $('.talk_record').height($(window).height()-60);
        // the element we want to apply the jScrollPane
//        var $el= $('#jp-container').jScrollPane({
//                    verticalGutter 	: -16
//                }),

        // the extension functions and options
        extensionPlugin 	= {

            extPluginOpts	: {
                // speed for the fadeOut animation
                mouseLeaveFadeSpeed	: 500,
                // scrollbar fades out after hovertimeout_t milliseconds
                hovertimeout_t		: 1000,
                // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
                // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
                // also, it will be shown when we start to scroll and hidden when stopping
                useTimeout			: true,
                // the extension only applies for devices with width > deviceWidth
                deviceWidth			: 980
            },
            hovertimeout	: null, // timeout to hide the scrollbar
            isScrollbarHover: false,// true if the mouse is over the scrollbar
            elementtimeout	: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
            isScrolling		: false,// true if scrolling
            addHoverFunc	: function() {

                // run only if the window has a width bigger than deviceWidth
                if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;

                var instance		= this;

                // functions to show / hide the scrollbar
                $.fn.jspmouseenter 	= $.fn.show;
                $.fn.jspmouseleave 	= $.fn.fadeOut;

                // hide the jScrollPane vertical bar
                var $vBar			= this.getContentPane().siblings('.jspVerticalBar').hide();

                /*
                 * mouseenter / mouseleave events on the main element
                 * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
                 */
                $el.bind('mouseenter.jsp',function() {

                    // show the scrollbar
                    $vBar.stop( true, true ).jspmouseenter();

                    if( !instance.extPluginOpts.useTimeout ) return false;

                    // hide the scrollbar after hovertimeout_t ms
                    clearTimeout( instance.hovertimeout );
                    instance.hovertimeout 	= setTimeout(function() {
                        // if scrolling at the moment don't hide it
                        if( !instance.isScrolling )
                            $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                    }, instance.extPluginOpts.hovertimeout_t );


                }).bind('mouseleave.jsp',function() {

                    // hide the scrollbar
                    if( !instance.extPluginOpts.useTimeout )
                        $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                    else {
                        clearTimeout( instance.elementtimeout );
                        if( !instance.isScrolling )
                            $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                    }

                });

                if( this.extPluginOpts.useTimeout ) {

                    $el.bind('scrollstart.jsp', function() {

                        // when scrolling show the scrollbar
                        clearTimeout( instance.hovertimeout );
                        instance.isScrolling	= true;
                        $vBar.stop( true, true ).jspmouseenter();

                    }).bind('scrollstop.jsp', function() {

                        // when stop scrolling hide the scrollbar (if not hovering it at the moment)
                        clearTimeout( instance.hovertimeout );
                        instance.isScrolling	= false;
                        instance.hovertimeout 	= setTimeout(function() {
                            if( !instance.isScrollbarHover )
                                $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                        }, instance.extPluginOpts.hovertimeout_t );

                    });

                    // wrap the scrollbar
                    // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
                    var $vBarWrapper	= $('<div/>').css({
                        position	: 'absolute',
                        left		: $vBar.css('left'),
                        top			: $vBar.css('top'),
                        right		: $vBar.css('right'),
                        bottom		: $vBar.css('bottom'),
                        width		: $vBar.width(),
                        height		: $vBar.height()
                    }).bind('mouseenter.jsp',function() {

                        clearTimeout( instance.hovertimeout );
                        clearTimeout( instance.elementtimeout );

                        instance.isScrollbarHover	= true;

                        // show the scrollbar after 100 ms.
                        // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
                        instance.elementtimeout	= setTimeout(function() {
                            $vBar.stop( true, true ).jspmouseenter();
                        }, 100 );

                    }).bind('mouseleave.jsp',function() {

                        // hide the scrollbar after hovertimeout_t
                        clearTimeout( instance.hovertimeout );
                        instance.isScrollbarHover	= false;
                        instance.hovertimeout = setTimeout(function() {
                            // if scrolling at the moment don't hide it
                            if( !instance.isScrolling )
                                $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
                        }, instance.extPluginOpts.hovertimeout_t );

                    });

                    $vBar.wrap( $vBarWrapper );

                }

            }

        },

            // the jScrollPane instance
                jspapi 			= $el.data('jsp');

        // extend the jScollPane by merging
        $.extend( true, jspapi, extensionPlugin );
        jspapi.addHoverFunc();

    });
</script>
<!--<div style="display:none"><script src="http://s24.cnzz.com/stat.php?id=4273731&web_id=4273731" language="JavaScript"></script><script src="http://s20.cnzz.com/stat.php?id=5240441&web_id=5240441" language="JavaScript"></script>-->
<!--<script type="text/javascript">-->
<!--var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");-->
<!--document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faca36f9d36d03a04d61c93f28c896386' type='text/javascript'%3E%3C/script%3E"));-->
<!--</script>-->
<!--</div>-->
</body>
</html>